<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title>商品列表</title>
	</head>
	<style>
		table {
			width: 85%;
			border-collapse: collapse;
			/* 合并边框 */
			margin: 20px 0;
			/* 外边距 */
		}
	
		th,
		td {
			border: 1px solid #ddd;
			/* 单元格边框 */
			text-align: left;
			/* 文本左对齐 */
			padding: 8px;
			/* 内边距 */
		}
	
		th {
			background-color: #f2f2f2;
			/* 表头背景色 */
			font-weight: bold;
			/* 字体加粗 */
		}
	
		tr:nth-child(even) {
			background-color: #f9f9f9;
		}
	
		/* 偶数行背景色 */
	
		tr:hover {
			background-color: #f1f1f1;
		}
	
		/* 鼠标悬停行背景色 */
	
		fieldset {
			border: 1px solid #ddd;
			/* 字段集边框 */
			padding: 20px;
			/* 内边距 */
			margin: 20px 0;
			/* 外边距 */
		}
	
		legend {
			padding: 0 10px;
			/* 内边距 */
			font-weight: bold;
			/* 字体加粗 */
		}
	
		input[type="text"],
		select {
			padding: 5px;
			/* 内边距 */
			margin: 5px 0;
			/* 外边距 */
			border: 1px solid #ddd;
			/* 边框 */
			border-radius: 4px;
			/* 圆角边框 */
		}
	
		input[type="button"] {
			padding: 5px 15px;
			/* 内边距 */
			margin: 5px 0;
			/* 外边距 */
			border: none;
			/* 无边框 */
			background-color: #007bff;
			/* 按钮背景色 */
			color: white;
			/* 文字颜色 */
			border-radius: 4px;
			/* 圆角边框 */
			cursor: pointer;
			/* 鼠标悬停时显示指针 */
		}
	
		input[type="button"]:hover {
			background-color: #0056b3;
			/* 鼠标悬停时按钮背景色 */
		}
	
		a {
			color: #007bff;
			/* 链接文字颜色 */
			text-decoration: none;
			/* 去除下划线 */
			font-weight: bold;
			/* 字体加粗 */
			transition: color 0.3s;
			/* 颜色变化过渡效果 */
		}
	
		a:hover {
			color: #0056b3;
			/* 鼠标悬停时链接文字颜色 */
			text-decoration: underline;
			/* 鼠标悬停时添加下划线 */
		}
	</style>
	<script type="text/javascript">
		//页面加载事件，进入页面 就要异步获取数据
		window.onload = function() {
			const token = sessionStorage.getItem('authToken'); // 从sessionStorage获取token

			//发送异步请求
			fetch('http://localhost:8080/category/list', {
					method: 'GET',
					headers: {
						'Authorization': token, // 在请求头中包含token
					},
				})
				.then((response) => response.json()) //将响应体中的JSON数据解析为JS对象
				.then((data) => {
					if (data.code === 1) {
						var dataProducts = data.data;
						var trs = '';
						for (var i = 0; i < dataProducts.length; i++) {
							var product = dataProducts[i];
							//模版字符窜
							var tr = `<tr>
						<td>${product.categoryName}</td>
						<td><a href="editEventCategories.html?id=${product.id}">编辑</a>&nbsp;&nbsp;<a href="enventCategory.html" onclick="deleteProduct('${product.id}')">删除</a></td>
					</tr>`;
							trs += tr;
						}
						document.getElementById("tbody").innerHTML = trs;
					}

				})
				.catch((e) => console.log('error', e))
		}

		function deleteProduct(id) {

			// 发送异步请求
			fetch("http://localhost:8080/category/delete?id=" + id)
				.then((response) => response.json())
				.then((data) => {
					if (data.code === 1) {
						// 删除成功后重新加载页面数据
						window.location.href = "enventCategory.html";
					} else {
						alert(data.message);
					}
				})
				.catch((e) => console.log('error', e));
		}
	</script>
	<body>
		<fieldset>
			<legend>分类列表</legend>
			<a href="./addevent_categories.html">新增事件分类</a>
			<table border="1">
				<thead>
					<tr>
						<th>事件分类</th>
						<th>操作</th>
					</tr>
				</thead>
				<tbody id="tbody">
				</tbody>
			</table>
		</fieldset>
	</body>
</html>